import React, { PureComponent } from 'react';
import {
  Routes,
  Route,
  // NavLink,
  Link,
  Navigate,
  useNavigate
} from 'react-router-dom'
import Home from './pages/Home';
import About from './pages/About'
import Login from './pages/Login';
import NotFound from "./pages/NotFound";
import HomeRecommend from "./pages/HomeRecommend";
import HomeRanking from "./pages/HomeRanking";
import Category from "./pages/Category";
import Order from "./pages/Order";
// import './style.css'

class App extends PureComponent {

  navigateTo(path) {
    console.log(path);
    // React Hook 只能在函数式组件中使用!
    // const navigate = useNavigate();
    // navigate(path);

    // 类组件 + 高阶组件方式，详见：Home组件
    const { navigate } = this.props.router
    navigate(path);
  }

  render() {
    return (
      <div className='app'>
        <div className='header'>
          <span>header</span>
          <div className='nav'>
            <Link to='/home'>首页</Link>
            <Link to='/about'>关于</Link>
            <Link to='/login'>登录</Link>
            {/* NavLink比Link多一些属性, 其次NavLink被选中时，会自动赋值一个 class='active' */}
            {/* <NavLink to='/home' style={({isActive}) => ({color: isActive ? 'red' : ''})}>首页</NavLink> */}
            {/* <NavLink to='/about' style={({isActive}) => ({color: isActive ? 'red' : ''})}>关于</NavLink> */}
            {/* <NavLink to='/home' className={({isActive}) => isActive ? 'link-active' : ''}>首页</NavLink> */}
            {/* <NavLink to='/about' className={({isActive}) => isActive ? 'link-active' : ''}>关于</NavLink> */}
            <button onClick={e => this.navigateTo('/category')}>分类</button>
            <span onClick={e => this.navigateTo('/order')}>订单</span>
          </div>
        </div>
        <hr />
        <div className='content'>
          <Routes>
            <Route path='/' element={<Navigate to='/home'/>} />
            <Route path='/home' element={<Home/>}>
              <Route path='/home' element={<Navigate to='/home/recommend'/>}/>
              <Route path='/home/recommend' element={<HomeRecommend/>}/>
              <Route path='/home/ranking' element={<HomeRanking/>}/>
            </Route>
            <Route path='/about' element={<About/>}/>
            <Route path='/category' element={<Category/>}/>
            <Route path='/order' element={<Order/>}/>
            <Route path='/login' element={<Login/>}/>
            <Route path='*' element={<NotFound/>}/>
          </Routes>
        </div>
        <hr />
        <div className='footer'>footer</div>
      </div>
     );
  }
}

function withRouter(WrapperComponent) {
  return (props) => {
    const navigate = useNavigate();
    const router = { navigate }
    return <WrapperComponent {...props} router={ router }/>
  }
}
export default withRouter(App);